<template>
  <div>
    <el-dropdown @command="handleCommand">
      <span class="avatar-dropdown">
        <!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->

        <!-- <img class="user-avatar" :src="avatar" alt="" /> -->
        <div v-if="curEmp" class="user-name" @click="count++">
          {{ username }} （{{ curEmp.CMP_Name }}）
          <span v-if="count > 9">{{ curEmp.EMP_ID }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
      </span>

      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <el-dropdown placement="right-start" trigger="click">
            <span class="el-dropdown-link">切换身份</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(e, index) in employees" :key="index" :index="index">
                <el-button type="text" @click="changeCurEmp(e)">
                  {{ e.CMP_Name }}
                  <i v-if="curEmp && curEmp.EMP_ID == e.EMP_ID" class="el-icon-check"></i>
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-dropdown-item>
        <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dialog :visible.sync="changePasswordVis" width="380px" title="修改密码" :modal-append-to-body="false">
      <el-form label-position="left" label-width="80px">
        <el-form-item label="新密码">
          <el-input v-model="password" show-password placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="checkPassword" show-password placeholder="请输入确认密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="changePassword">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { recordRoute } from '@/config'
import request from '@/utils/request'

export default {
  name: 'VabAvatar',
  data: function () {
    return {
      count: 0,
      password: '',
      checkPassword: '',
      changePasswordVis: false,
    }
  },
  computed: {
    ...mapGetters({
      avatar: 'user/avatar',
      username: 'user/username',
      curEmp: 'user/curEmp',
      employees: 'user/employees',
    }),
  },
  methods: {
    changePassword() {
      if (this.password != this.checkPassword) {
        alert('两次输入密码不一致')
        return
      }
      request({
        url: '/api/UserApi/Login/ChangePassword',
        method: 'get',
        params: {
          password: this.password,
        },
      }).then(({ data }) => {
        this.$message('修改成功')
        this.changePasswordVis = false
      })
    },
    handleCommand(command) {
      switch (command) {
        case 'logout':
          this.logout()
          break
        case 'changePassword':
          this.changePasswordVis = true
          break
      }
    },
    logout() {
      this.$baseConfirm(
        '您确定要退出' + this.$baseTitle + '吗?',
        null,
        async () => {
          await this.$store.dispatch('user/logout')
          if (recordRoute) {
            const fullPath = this.$route.fullPath
            this.$router.push(`/login?redirect=${fullPath}`)
          } else {
            this.$router.push('/login')
          }
        }
      )
    },
    changeCurEmp(e) {
      this.$store.commit('user/changeCurEmp', e)
    },
  },
}
</script>
<style lang="scss" scoped>
.avatar-dropdown {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  height: 50px;
  padding: 0;

  .user-avatar {
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
  }

  .user-name {
    position: relative;
    margin-left: 5px;
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>
